import React, {useEffect, useState} from 'react';
import {result} from './data';
import {StyleSheet, View, Text} from 'react-native';
import { readDir } from 'react-native-fs';

interface ResultDisplayProp {
  result: any;
}
const Index: React.FC<ResultDisplayProp> = props => {
  const resultDisplay = () => {

    return props.result.data.ljlist.slice(0, 3).map((item: any) => {
      return (
        <View style={styles.resultItem} key={item.title}>
          <View>
            <Text style={styles.resultText}>{item.title}</Text>
          </View>
          <View>
            <Text style={styles.resultText}>{item.name}</Text>
          </View>
        </View>
      );
    });
  };

  const emptyResultDisplay = () => {
    return (
      <View>
        <Text style={styles.emptyResultText}>Unrecognized</Text>
      </View>
    );
  };

  return (
    <View style={styles.resultWrapper}>
      <View style={styles.titleWrapper}>
        <Text style={styles.title}>Garbage Classification Result</Text>
      </View>
        {props.result && props.result.data && props.result.data.ljlist.length > 0
          ? resultDisplay()
          : emptyResultDisplay()}
    </View>
  );
};

const styles = StyleSheet.create({
  titleWrapper: {
    position: 'absolute',
    top: 10
  },
  title: {
    color: 'white',
    fontSize: 18,
    textShadowColor: 'black',
    textShadowOffset: {width: 5, height: 5},
    textShadowRadius: 3,
  },
  resultWrapper: {
    width: 305,
    height: '31.8%',
    borderColor: 'green',
    borderWidth: 3,
    alignItems: 'center',
    position: 'absolute',
    flexDirection: 'column',
    justifyContent: 'center',
    alignContent: 'center',
    top: 0,
    left: '13%',
    zIndex: 999,
  },
  resultItem: {
    padding: 5,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '90%',
  },
  resultText: {
    color: 'white',
    fontSize: 20
  },
  emptyResultText: {
    color: 'white',
    fontSize: 40,
    marginTop: 120,
  },
  nameText: {
    borderColor: 'blue',
    borderWidth: 1,
    borderRadius: 10,
    width: 80,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Index;
